<template>
   <div>
       <el-card>
        <!-- 
            搜索框区域
            el-form:ElementUI的表单组件
            el-form-item:ElementUI的表单项组件

         -->
         <el-form :inline="true">
            <el-form-item label="类型">
                <el-select v-model="query.type">
                    <el-option label="姓名" value="name"></el-option>
                    <el-option label="性别" value="gender"></el-option>
                    <el-option label="电话" value="phone"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="值">
                <el-select v-model="query.value" v-if="isSelectGender">
                    <el-option label="男" value="男"></el-option>
                    <el-option label="女" value="女"></el-option>
                </el-select>
                <el-input placeholder="请输入值" v-model="query.value" v-else></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="getStudent">搜索</el-button>
            </el-form-item>
         </el-form>
        
         <!--
            el-table是ElementUI中表格组件，常见的属性如下
            data:显示的数据
            el-table-column是ElementUI中表格列表，常见的属性如下所示
            label:显示的标题
            prop:对应的列字段的字段名
         -->
         <el-table :data="students">
            <el-table-column label="编号" prop="_id"></el-table-column>
            <el-table-column label="姓名" prop="name"></el-table-column>
            <el-table-column label="性别" prop="gender"></el-table-column>
            <el-table-column label="年龄" prop="age"></el-table-column>
            <el-table-column label="头像" prop="image">
                <template slot-scope="scope">
                    <el-avatar :src="scope.row.image" shape="square"></el-avatar>
                </template>
            </el-table-column>
             <el-table-column label="专业" prop="subjectsId">
                <template slot-scope="scope">
                    {{scope.row.subjectsId.name}}
                </template>
             </el-table-column>
             <el-table-column label="班级" prop="classesId">
                <template slot-scope="scope">
                    {{scope.row.classesId.name}}
                </template>
             </el-table-column>

             <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" circle  icon="el-icon-s-tools"></el-button>
                    <el-button type="danger" circle  icon="el-icon-delete"></el-button>
                    <el-button type="warning" circle  icon="el-icon-edit"></el-button>
                </template>
             </el-table-column>
         </el-table>
         <!-- 
            el-pagination用来完成分页操作，常用的属性如下
            page-size：规定每页要显示的记录数
            total:总记录
            background:设置分页按钮是否有背景色
            current-change:当currentPage页发生变化的时候会被触发
            page-sizes:每页显示个数选择器的选项设置
          -->
          <el-pagination
            :page-sizes="[5,10,15,20]"
            :page-size="query.pageSize"
            :total="total"
            background
            layout="sizes,prev,pager,next,jumper,->,total"
            @current-change="currentPageHanle"
            @size-change="sizeChangeHanle">
          </el-pagination>
       </el-card>
   </div>
</template>

<script>
export default {
    data(){
        return{
          students:[],
          total:0,
          query:{
            type:'',
            value:'',
            pageSize:5,
            currentPage:1
          },
          isSelectGender:false
        }
    },
    methods:{
        async getStudent(){
            const result=await this.$api.student.getStudentsApi(this.query)
            console.log(result.data);
            this.students=result.data.result
            this.total=result.data.total //获取到后端返回来的total，然后赋值给data中total
        },
        currentPageHanle(arg){
           this.query.currentPage=arg
           this.getStudent()
        },
        //如果每页的记录数发生变化的时候会触发
        sizeChangeHanle(arg){
            this.query.pageSize=arg
            this.getStudent()
        }
    },
    watch:{
        'query.type':{
            handler(newval){
               this.query.value=''
               if(newval=='name'||newval=="phone"){
                this.isSelectGender=false
               }else if(newval=='gender'){
                this.isSelectGender=true
               }
            }
        }
    },
    created(){
        this.getStudent()
    }
}
</script>

<style>

</style>